<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'padding-top:' + touHeight + 'px'"></view>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="fanhuiUp" @tap="toFanhuiUp"></view>
			<view class="pageTitle">人员资料</view>
		</view>
		<view class="page_content" :style="'padding-top:' + touHeight + 'px'">
			<view class="renyuanziliao_top">
				<view class="details_name">工作信息</view>
				<view class="queren_list">
					<view class="queren_left">
						<view class="name">确认到岗时间</view>
						<view class="text">{{company_first_time==null?'--:--:--':company_first_time}}</view>
					</view>
					<view class="public_btn public_btn04" @tap="onArrival" :class="company_first_time==null?'':'active'">{{company_first_time==null?'确认到岗':'已到岗'}}</view>
				</view>
				<view class="queren_list">
					<view class="queren_left">
						<view class="name">确认到岗时间</view>
						<view class="text">{{company_second_time==null?'--:--:--':company_second_time}}</view>
					</view>
					<view class="public_btn public_btn05" @tap="onWangong" :class="company_second_time==null?'':'active'">{{company_second_time==null?'确认完工':'已完工'}}</view>
				</view>
				<view class="renshu_fu">
					<view class="renshu_list">
						<view class="ren"><view class="dan hong">{{time_hour}}</view>小时</view>
						<view class="text">应工作时长</view>
					</view>
					<view class="renshu_list">
						<view class="ren"><view class="dan">{{duration_hour}}</view>小时</view>
						<view class="text">实际工作时长</view>
					</view>
				</view>
				<view class="public_btn public_btn06" style="margin-left: 30rpx;" @tap="onYigeshichang">调整工作时长</view>
				<view class="public_btn public_btn03" style="margin-right: 30rpx;" :class="is_renewal==1?'':'active'" @tap="onYigeshunyan">{{is_renewal==1?'顺延用工':'已顺延'}}</view>
			</view>
			<view class="jiben_ziliao">
				<view class="details_name">基本资料</view>
				<view class="information">
					<view class="touxiang" :style="'background: url('+avatar+') center center no-repeat;'"></view>
					<view class="wenzi_box">
						<view class="name">{{username}}</view>
						<view class="text_box">
							<view class="old">{{age}}岁</view>
							<view class="gender" :class="gender==1?'nan':'nv'"></view>
							<view class="jibie">{{level_text}}</view>
						</view>
					</view>
				</view>
				<view class="ziliao_list" @click="mackPhone">
					<view class="name">手机号</view>
					<view class="text">{{mobile}}</view>
				</view>
				<view class="ziliao_list">
					<view class="name">身高</view>
					<view class="text"><view class="bold">{{stature}}</view>cm</view>
				</view>
				<view class="ziliao_list">
					<view class="name">健康证</view>
					<view class="text">
						<image :src="health_image" mode="aspectFill" style="width: 360rpx; height: 360rpx;"></image>
					</view>
				</view>
				<view class="ziliao_list">
					<view class="name">疾病史</view>
					<view class="text">{{disease}}</view>
				</view>
				<view class="ziliao_list">
					<view class="name">自我介绍</view>
					<view class="text">{{introduce}}</view>
				</view>
			</view>
			<view class="jianzhi_jingli">
				<view class="details_name">兼职经历<view class="jing_te">在我店上岗<view class="bold">{{count}}</view>次</view></view>
				<view class="jianzhi_list" v-for="item in productList">
					<view class="name">{{item.order_job_type_text}}</view>
					<view class="text" :style="'background: url('+ URL +'/JD_wx_img/jianzhi_list_img01.png) left center no-repeat;'">{{item.hotel_name}}</view>
					<view class="text" :style="'background: url('+ URL +'/JD_wx_img/jianzhi_list_img02.png) left center no-repeat;'">{{item.order_job_date}}</view>
				</view>
			</view>
			<!-- 加载效果 -->
			<view class='loading_text' :hidden="noMre">没有更多了</view>
			<view class="loading_text" :hidden="loading">加载中...</view>
		</view>
		<!-- 调整工作时长弹窗 -->
		<view class="popup_bg" :class="{'active':shichang==1}" @tap="closePop01"></view>
		<view class="shichang_popup" :class="{'active':shichang==1}">
			<view class="close_pop" @tap="closePop01"></view>
			<view class="shichang_name">调整工作时长</view>
			<view class="input_box">
				<view class="name">工作时长</view>
				<input type="number" name="shichang_text" class="text_left" :value="hour" @input="shichang_text" placeholder-class="phcolor" placeholder="请填写工作时长"/>
				<view class="danwei">小时</view>
			</view>
			<view class="tips">
				<view>温馨提示：</view>
				<view>1、手动修改每个人的实际工作时长</view>
				<view>2、平台会对手动修改的工作时长进行审核，如发现情况不属实或作弊等现象将会严肃处理</view>
			</view>
			<view class="public_btn public_btn03" style="display: block;width: auto;margin: 0px 30rpx;margin-top: 60rpx;" @tap="submitForm">确 定</view>
		</view>
		<!-- 顺延工作时长弹窗 -->
		<view class="popup_bg" :class="{'active':shunyan==1}"  @tap="closePop02"></view>
		<view class="shichang_popup shunyan_popup" :class="{'active':shunyan==1}">
			<view class="close_pop" @tap="closePop02"></view>
			<view class="shichang_name">调整工作时长</view>
			<view class="input_box">
				<view class="name">工作时长</view>
				<view class="shuliang_box">
					<view class="shuliang_btn reduce" :class="{'on':reduce==1}" @tap="reduceTime"></view>
					<input type="number" name="shunyan_text" class="text_left" :value="day" @input="shunyan_text2" placeholder-class="phcolor" placeholder="0"/>
					<view class="shuliang_btn add" :class="{'on':add==1}" @tap="addTime"></view>
				</view>
			</view>
			<view class="tips">
				<view>温馨提示：</view>
				<view>1、手动修改每个人的实际工作时长</view>
				<view>2、平台会对手动修改的工作时长进行审核，如发现情况不属实或作弊等现象将会严肃处理</view>
			</view>
			<view class="public_btn public_btn03" style="display: block;width: auto;margin: 0px 30rpx;margin-top: 60rpx;" @tap="submitForm2">确 定</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js";
	export default {
		data() {
			return {
				touHeight: 0,
				pageTop: 0,
				//域名拼接
				URL: app.globalData.URL,
				noMre: true,
				loading: false,
				company_first_time:'',//酒店第一次打卡时间
				company_second_time:'',//酒店第二次打卡时间
				time_hour:'',//应工作时间
				duration_hour:'',//实际工作时间
				avatar:'',//用户头像
				username:'',//用户名称
				age:'',//用户年龄
				gender:'',//用户性别
				level_text:'',//用户等级
				stature:'',//身高
				health_image:'',//健康证
				disease:'',//病历
				introduce:'',//自我介绍
				count:'',//在我店上岗次数
				productList:[],
				//默认页数
				page: 1,
				//每页展示条数
				list_rows: 3,
				shichang: 2,
				hour:'',//表单默认值
				shunyan: 2,
				reduce: 0,
				add: 0,
				day:1,
				is_renewal:'',
				mobile:''
			}
		},
		onLoad(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			
			that.user_id = options.user_id;//用户id
			that.hotel_id = options.hotel_id;//酒店id
			that.order_id = options.order_id;//订单id
			//城市定位
			uni.authorize({
				// 获取用户定位信息
				scope: "scope.userLocation",
				// 用户同意授权执行
				success(){
					// 引入腾讯地图api
					// 实例化API核心类
					var qqmapsdk = new QQMapWX({
						// 填写自己的Key值，这个值是与AppID绑定的
						key: 'HBABZ-XSB6G-3IJQ3-ITFD5-7NDTZ-O2FEO'
					 });
					//获取位置信息
					uni.getLocation({
						type: 'gcj02',
						success: function (res) {
							// 逆地址解析方法
							qqmapsdk.reverseGeocoder({
								success(res) {
									that.address = res.result.formatted_addresses.recommend
								}
							})	
						}
					})
				},
				// 若用户不同意授权，弹框提示
				fail(res){
					uni.showToast({
						icon :"none",
						title: '注意：需要获取您的定位授权,否则部分功能将无法使用',
						duration: 2000
					})
				}
			})
			// that.address = uni.getStorageSync('address')//首页获取的街道定位
			//默认加载数据
			var user_id = that.user_id;//用户Id
			var hotel_id = that.hotel_id;//酒店ID
			var order_id = that.order_id;//订单ID
			var page = that.page//当前页数
			var list_rows = that.list_rows//每页展示条数
			that.getproinfo(user_id,hotel_id,order_id,page,list_rows,that)
			//我的用工订单详情
			uni.request({
				url: app.globalData.URL + '/api/v1/Hotel/userInfo?user_id='+that.user_id+'&hotel_id='+that.hotel_id+'&order_id='+that.order_id,
				method: "get",
				header:{
					token: uni.getStorageSync('token')
				},
				success: function (res) {
					that.company_first_time = res.data.data.company_first_time;//酒店第一次打卡时间
					that.company_second_time = res.data.data.company_second_time;//酒店第二次打卡时间
					that.time_hour = res.data.data.time_hour+'';//应工作时间
					that.duration_hour = res.data.data.duration_hour+'';//实际工作时间
					that.avatar = res.data.data.avatar;//用户头像
					that.username = res.data.data.username;//用户名称
					that.age = res.data.data.age;//用户年龄
					that.gender = res.data.data.gender;//用户性别
					that.level_text = res.data.data.level_text;//用户等级
					that.stature = res.data.data.stature;//身高
					that.health = res.data.data.health;//身高
					that.health_image = res.data.data.health_image;//健康证
					that.disease = res.data.data.disease;//病历
					that.introduce = res.data.data.introduce;//自我介绍
					that.count = res.data.data.count+'';//在我店上岗次数
					that.is_renewal = res.data.data.is_renewal//是否顺延过
					that.mobile = res.data.data.mobile//是否顺延过
				}
			})
		},
		
		/**
		* 页面上拉触底事件的处理函数
		*/
		onReachBottom(){
			var that = this;
			//触底加载数据
			var user_id = that.user_id;//用户Id
			var hotel_id = that.hotel_id;//酒店ID
			var order_id = that.order_id;//订单ID
			var page = that.page//当前页数
			var list_rows = that.list_rows//每页展示条数
			page++;
			that.page = page//打印page
			var page = that.page//触底后的页数触底一次+1
			that.getproinfo(user_id,hotel_id,order_id,page,list_rows,that)
		},
		
		methods: {
			//返回上一级
			toFanhuiUp:function(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			//确认到岗操作
			onArrival(){
				var that = this;
				uni.request({
					url: app.globalData.URL + '/api/v1/Hotel/clockUser?order_id='+that.order_id+'&action=1'+'&location='+that.address,
					method: "get",
					header:{
						token: uni.getStorageSync('token')
					},
					success: function (res) {
						that.company_first_time = res.data.data
						wx.showToast({
						  title: res.data.msg,
						  icon: 'success',
						  duration: 1000
						})
					}
				})
			},
			//确认完工操作
			onWangong(){
				var that = this;
				uni.request({
					url: app.globalData.URL + '/api/v1/Hotel/clockUser?order_id='+that.order_id+'&action=2'+'&location='+that.address,
					method: "get",
					header:{
						token: uni.getStorageSync('token')
					},
					success: function (res) {
						that.company_second_time = res.data.data
						wx.showToast({
						  title: res.data.msg,
						  icon: 'success',
						  duration: 1000
						})
					}
				})
			},
			//展开调整工作时长
			onYigeshichang(e){
				var that = this;
				that.shichang = 1
				that.orderid = e.currentTarget.dataset.orderid;
			},
			//关闭调整工作时长
			closePop01(){
				var that = this;
			    that.shichang = 2
			},
			
			//关闭延长时长
			closePop02(){
				var that = this;
			    that.shunyan = 2
			},
			
			//顺延时长
			onYigeshunyan(e){
				var that = this;
				that.shunyan = 1
				that.orderid = e.currentTarget.dataset.orderid;
			},
			//工作时长实时监控
			shichang_text:function(e){
				var that = this;
				that.hour = e.detail.value;
			},
			//顺延时长实时监控
			shunyan_text2:function(e){
				var that = this;
				that.day = e.detail.value;
			},
			
			//调整工作时长表单提交
			submitForm:function(){
				var that = this;
				that.param = [];
				if(that.hour==''){
					uni.showModal({
						title: '提示',
						content: '请填写时长',
						showCancel: false,
						confirmColor:'#E85426',
					})	
				}else{
					that.param = [{order_id:that.order_id,hour:that.hour}]
					uni.request({
						url: app.globalData.URL + '/api/v1/Hotel/clockFix',
						method: "get",
						data:{
							param:that.param
						},
						header:{
							token: uni.getStorageSync('token')
						},
						success: function (res) {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: true,
								confirmColor:'#E85426',
								success(res){
									if(res.confirm){
										that.duration_hour = that.hour;
										that.shichang = 2;
										that.hour = '';
									}
								}
							})
						}
					})
				}
			},
			
			//调整工作时长表单提交
			submitForm2:function(){
				var that = this;
				that.param = [];
				if(that.day<1){
					uni.showModal({
						title: '提示',
						content: '请填写时长',
						showCancel: false,
						confirmColor:'#E85426',
					})	
				}else{
					that.param = [{order_id:that.order_id,day:that.day}]
					uni.request({
						url: app.globalData.URL + '/api/v1/Hotel/postponeUser',
						method: "get",
						data:{
							param:that.param
						},
						header:{
							token: uni.getStorageSync('token')
						},
						success: function (res) {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: true,
								confirmColor:'#E85426',
								success(res){
									if(res.confirm){
										that.shunyan = 2;
										that.day = 1;
										that.is_renewal = 2;
									}
								}
							})
						}
					})
				}
			},
			//增加时长按钮
			addTime:function(e){
				var that = this;
				var day = that.day
				day++;
				that.day = day;
				if(day>0){
					that.reduce = 0
				}else{
					that.reduce = 1
				}
			},
			
			//减少时长按钮
			reduceTime:function(e){
				var that = this;
				var day = that.day
				day--;
				if(day<=0){
					that.day = 0;
					that.reduce = 1
				}else{
					that.day = day;
					that.reduce = 0
				}
				
			},
			
			//兼职列表函数封装
			getproinfo(user_id,hotel_id,order_id,page,list_rows,that){
				var that = this;
			    uni.request({
					url: app.globalData.URL + '/api/v1/Hotel/userInfo?user_id='+user_id+'&hotel_id='+hotel_id+'&order_id='+order_id,
					method: 'get',
					header:{
						token: uni.getStorageSync('token')
					},
					data:{
						page: page,
						list_rows: list_rows,
					},
					success: function (res) {
						var productList = that.productList;
						///没有数据的时候
						if(res.data.data.data.length < 5){
							that.noMre = false
							that.loading = true
						}else{
							that.noMre = true
							that.loading = false
						}
						//有数据的时候循环将结果集追加到数组后面
						for (var i = 0; i < res.data.data.data.length; i++) {
							productList.push(res.data.data.data[i]);
						}
						that.productList = productList
					},
					fail: function (res) {
					  console.log(res);
					},
				});
			}
		},
	}
</script>

<style>
	.page_content{
		padding: 0px;
		padding-bottom: 180rpx;
	}
	.renshu_fu{
		padding: 30rpx 0px;
	}
	.renyuanziliao_top{
		padding-bottom: 30rpx;
	}
	.public_btn{
		margin-bottom: 0px;
	}
	.public_btn{
		width: 337rpx;
		display: inline-block;
		margin: 0rpx 8rpx;
		margin-top: 20rpx;
	}
	.public_btn_box{
		margin: 0px 30rpx;
		margin-top: 40rpx;
	}
	.public_btn.public_btn04.active{
		background: #E6ECF3;
		color: #3079DC;
		pointer-events: none;
	}
	.public_btn.public_btn05.active{
		background: #DDF3E7;
		color: #19C769;
		pointer-events: none;
	}
	.shichang_popup.shunyan_popup input{
		border-bottom: none;
		padding: 0px;
		width: 100rpx;
		height: 60rpx;
		text-align: right;
		border: 2rpx solid #ddd;
		border-radius: 6rpx;
		display: inline-block;
		padding: 0px 15rpx;
		font-size: 28rpx;
		color: #333;
	}
	.public_btn.public_btn03.active{
		background: #EED4CB;
		color: #E85426;
	}
</style>
